<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit
    ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod
  accusantium vero.</p>

<style>
  a {
    background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    /* 相当于紧贴bottom */
    background-position: 0 100%;
    transition: 1s all;
    color: #0cc;
  }

  a:hover {
    /* 由于设定的 background-position 是 0 100%，如果，设定的 background-position 是 100% 100%，我们可以得到一个反向的效果*/
    background-size: 100% 3px;
    color: #000;
  }
</style>